<template>
	<!-- 社交 - 距离 -->
	<view class="socialize_distance_box">
		
		<view class="item_box" v-for="(item,index) in 5" @click="handleGoOtherPage(item)">
			
			<view class="item" >
			
				<image src="../../static/img/banner3.png" style="width: 100%; height: 100%;" mode=""></image>
				<view class="info">
					<text class="name" style="font-size: 20rpx;">elite295</text>
					
					<view class="distance">
						<u-icon name="map-fill" color="#0156F6" size="18rpx"></u-icon>
						<text style="font-size: 18rpx; margin-left: 7rpx;">2.3km</text>
					</view>
				</view>
				
			</view>
			
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 跳转他人主页
				
			handleGoOtherPage() {
				uni.navigateTo({
					url: '/pages/socialize/other'
				})
			}
		}
	}
</script>

<style lang="scss">
	.socialize_distance_box {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
		
		.item_box {
			display: flex;
			justify-content: center;
			width: 33.33%;
			margin-bottom: 30rpx;
			
			.item {
				position: relative;
				width: 229rpx;
				height: 288rpx;
				border-radius: 20rpx;
				overflow: hidden;
				
				
				.info {
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					flex-direction: column;
					width: 229rpx;
					padding: 15rpx;
					color: #fff;
					background-color: #000;
					opacity: 0.7;
					.distance {
						display: flex;
						align-items: center;
						margin-top: 12rpx;
					}
					
				}
				
			}
			
			
		}
		
		
	
		.outh {
			margin: 0 0 30rpx 0;
		}
	}
</style>

